<template>
  <div class="btnbox" :style="{left:comLeft}">
    <div
      class="one-svgbtn"
      style="height:50px;"
      @click="$store.commit('design/setSvgBoxShow',!$store.state.design.svgBoxShow)"
    >
      <img v-show="!$store.state.design.svgBoxShow" src="/static/image/op.png" alt="img">
      <img v-show="$store.state.design.svgBoxShow" src="/static/image/op1.png" alt="img">
    </div>
    <div
      v-for="(item,key) in comHasIcon"
      :key="key"
      :ref="key"
      class="one-svgbtn"
      :class="{active:key===$store.state.design.whichSvg}"
      :title="item"
      @click="clickSvgBtn(key)"
    />
  </div>
</template>
<script>
export default {
  components: {},
  computed: {
    comLeft() {
      var myLeft;
      if (this.$store.state.design.smallScreen) {
        myLeft = '446px';
      } else {
        myLeft = this.$store.state.design.svgBoxShow ? 'calc(50% + 224px)' : '446px';
      }
      return myLeft;
    },
    comHasIcon() {
      var iconObj = {};
      for (var k in this.$store.state.design.svgKeys) {
        if (this.$store.state.design.svgKeys[k].flag) { iconObj[k] = this.$store.state.design.svgKeys[k].title; }
      }
      return iconObj;
    }
  },
  created() {
    var that = this;
    myVueApp.appendSvgIcon = this.appendSvgIcon;
    window.myVueApp.clikcPart = that.clickSvgBtn;
  },
  mounted() {},
  methods: {
    appendSvgIcon(key, node) {
      console.log('appendSvgIcon');
      console.log(key);
      console.log(node);
      this.$refs[key][0].appendChild(node);
    },
    clickSvgBtn(key, flag) {
      svgTool.cancelFun();
      if (!this.$store.state.design.svgBoxShow) { this.$store.commit('design/setSvgBoxShow', true); }
      if (!this.$store.state.design.svgKeys[key]) return;
      if (this.$store.state.design.whichSvg !== key) {
        this.$store.commit('design/setWhichSvg', key);
        svgTool.changeSvg(key);
        if (!flag && window.BLS && window.BLS.rotation) { window.BLS.rotation(key); }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.btnbox {
  position: absolute;
  max-height: 100%;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 0 1px #dbd9da;
  overflow: auto;
  transition: left 0.5s;
}
.one-svgbtn {
  position: relative;
  background-color: #fff;
  box-sizing: border-box;
  width: 70px;
  height: 70px;
  padding: 15px;
  cursor: pointer;
  text-align: center;
}
.one-svgbtn:hover {
  background-color: #dbd9da;
}
.one-svgbtn.active {
  padding: 0;
}
.one-svgbtn.active svg .spc {
  fill: #339;
}
</style>

// WEBPACK FOOTER //
// src/components/btn-box.vue
